<template>
    <ul class="tableWrapUl">
        <li 
            v-for="(item,index) in topList" 
            @click="changeItem(item.id)"
            :key="index" 
            :value="item.id" 
            :class="{'isActive':currentItem==item.id}">
        {{item.name}}
        </li>
    </ul>
</template>
<script>
export default {
    name:"topList",
    props:{
        topList:Array,
        currentItem:[String,Number]
    },
    methods:{
        changeItem(id){
            this.$emit('changeTop',id)
        }
    }
}
</script>
<style lang="stylus" scoped>
.tableWrapUl
    list-style:none;
    display:flex;
    padding:0;
    margin:0;
    li
        width:150px;
        line-height:60px;
        height:60px;
        text-align:center;
        border-right:1px solid #ddd;
        border-top:1px solid #ddd;
        background:#fff;
        cursor pointer
        &:nth-child(1)
            border-left:1px solid #ddd;
    .isActive
        background:#1890ff;
        color:#fff;
</style>